<template>
    <div>
        <myheader></myheader>

        <Breadcrumb :datas="datas"></Breadcrumb>
        <br><br>

        <h3>添加商品</h3>

        <section class="featured-block text-center">
		<div class="container">

        <div>
            {{cid}}
            分类:<select @change="fl" >
                <option value="kongbai"></option>
                <option v-for="(item,index) in cates" :key="index" :value="item.id" >
                    {{item.cname}}
                </option>
            </select>
        </div>

        <br><br>

        <div>
            {{name}}
            名称:<input type="text" v-model="name">
        </div>

        <br><br>

        <div>
            {{price}}
            价格:<input type="text" v-model="price">
        </div>

        <br><br>

        <div>
            {{desc}}
            简述:<textarea v-model="desc" rows='5'></textarea>
        </div>

        <br><br>

        <div>
            {{color}}
            颜色:<input type="text" v-model="color">
            <!-- {{param}}
            规格:<textarea v-model="param" rows='5'></textarea> -->
        </div>

        <br><br>

        <div>
            大小:<input type='text' v-model="size">
        </div>

        <br><br>
        
        <div>
            {{pic}}
            照片:<input type="file"  @change="addpic">
        </div>

        <br><br>

        <div>
            {{video}}
            视频:<input type="file"  @change="addvideo">
        </div>

        <br><br>

        <div v-show="video_url!==''">
            {{video_url}}
            <video controls="controls" :src="video_url" width="260" height="150"></video>
        </div>
        
        <br><br>

       <Button @click="submit">提交</Button>

		</div>
	    </section>
        <myfooter ></myfooter>




    </div>
</template>




<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';


export default {
    data(){
        return{
             //面包屑导航
	        datas:[{title:'首页',route:{path:'/'}},{title:'商品添加'}],
            name:'',
            desc:'',
            cid:'',
            price:'',
            color:'',
            size:'',
            pic:'',
            video:'',
            video_url:'',
            //分类
            cates:[],

        }
    },

//定义组件
components:{
	'myheader':myheader,
	'myfooter':myfooter,
},


mounted(){
    

    
    //判断是否是管理员账户
    this.axios.get('http://localhost:8000/userlist/',{params:{uid:localStorage.getItem('uid')}}).then((res)=>{
        console.log(res)
        // console.log(res.data.message[0].type)
        //判断
        if(res.data.message[0].type==0){
            this.$Message('您不是管理员用户')
            this.$router.push('/')
            return false
        }
    })

    //获取所有分类
    this.axios.get('http://localhost:8000/addcate/').then((res)=>{
            console.log(res)
            this.cates=res.data.message         
        })


},


methods:{
    //赋值分类
    fl:function(e){
        this.cid = e.target.value
    },

    //上传照片
    addpic:function(e){
        
        //声明文件
        let file = e.target.files[0]
        //声明数组
        let dataform = new FormData()
        //添加
        dataform.append('file',file)

        let config = {'Content-Type':'multipart/form-data'}

        this.axios.post('http://localhost:8000/uploadfile/',dataform,config).then((res)=>{
            console.log(res);
            this.pic = res.data.filename
        })		
    },


    //上传视频
    addvideo:function(e){
        let file = e.target.files[0]
        
        let dataform = new FormData()

        dataform.append('file',file)

        this.axios.post('http://localhost:8000/uploadfile/',dataform).then((res)=>{
            console.log(res);
            this.video = res.data.filename
            this.video_url =  'http://localhost:8000/static/upload/'  + res.data.filename
        })	
    },



    
    //提交
    submit(){

        //将变量转换位字符串
        var param_str = {"color":this.color,'size':this.size}
        console.log(param_str)

        //强转位字符串
        param_str = JSON.stringify(param_str)
        console.log(param_str)

        this.axios.get('http://localhost:8000/addgoods/',{params:{name:this.name, price:this.price, cid:this.cid, desc:this.desc, img:this.pic, video:this.video, param:param_str}}).then((res)=>{
            console.log(res)
            this.$Message(res.data.message)
            this.$router.go(0)
        })
    },




}




}
</script>